<template>
	<div>
		<v-card v-if="showdialog"  @closedialog="close" :isadd="isadd" :formdata="formdata" @submitform="submitdialog"></v-card>
		<div class="user">
			<v-top-bar @handleSearch="handlesearch" @clearBack="clear" @show="showDialog"></v-top-bar>
			<el-table :data="tableData" style="width: 100%" v-loading="loading">
				<el-table-column type="index" label="#" width="50">
				</el-table-column>
				<el-table-column label="日期" prop="date">
				</el-table-column>
				<el-table-column label="姓名" prop="name">
				</el-table-column>
				<el-table-column label="地址" prop="address">
				</el-table-column>
				<el-table-column label="爱好" prop="likes">
				</el-table-column>
				<el-table-column align="center" label="操作">
					<template v-slot="scope">
						<el-button type="primary" size="mini" @click="handleEdit(scope.$index, scope.row)"
							icon="el-icon-edit"></el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)"
							icon="el-icon-delete">
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="page.current" :page-sizes="[1, 5, 10, 20]" :page-size="page.size"
				layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import vTopBar from '../components/main/TopBar.vue'
	import vCard from '../components/main/Card.vue'
	export default {
		name: 'user',
		data() {
			return {
				loading: false,
				total: 0,
				currentPage4: 4,
				page: {
					size: 10,
					current: 1
				},
				tableData: [],
				search: '',
				showdialog:false,//控制是否显示对话框
				isadd:true,
				formdata:{}
			}
		},
		components: {
			vTopBar,
			vCard
		},
		mounted() {
			this.initData()
		},
		watch: {
			$route(to, from) {
				console.log('to=>',to);
				console.log(from);
			}
		},
		methods: {
			/* 关闭对话框 */
			close(){
				this.showdialog = false
			},
			/* 显示对话框 */
			showDialog(){
				this.showdialog = true
				this.isadd = true
			},
			/* 初始化列表和计算总数 */
			initData() {
				this.getlist(this.page.current)
				this.getTotal()
			},
			/* 编辑信息 */
			handleEdit(index, row) {
				console.log(index, row);
				this.isadd = false
				this.showdialog = true
				this.formdata = row 
			},
			/* 提交 */
			 submitdialog(info){
				if(info.isadd){
					 this.$Api.addList({
						rowData:info.formdata
					}).then(res=>{
						this.showdialog = false
						this.initData()
						this.$message({
							type: 'success',
							message: '添加成功!'
						});
					}) 
					return
				}else {
					console.log('1111');
					console.log(info.formdata);
					 this.$Api.updateList({
						rowData:info.formdata
					}).then(res=>{
						this.showdialog = false
						this.initData()
						this.$message({
							type: 'success',
							message: '编辑成功!'
						});
					}) 
				}
			}, 
			/* 删除信息 */
			handleDelete(index, row) {
				this.$confirm('此操作将永久删除该项, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$Api.deleteList({
						id: row.id
					}).then(res => {
						this.initData()
					})
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			/* 搜索 */
			handlesearch(value) {
				if (value == '') {
					this.$message({
						message: '警告，搜索内容不能为空',
						type: 'warning'
					});
					return
				} else {
					this.loading = true
					this.$Api.getListByValue({
						value
					}).then(res => {
						this.tableData = res.data.list
						this.total = res.data.list.length
						this.loading = false
					})
				}
			},
			/* 获取列表 */
			getlist(current) {
				this.loading = true
				this.$Api.getList({
					current
				}).then(res => {
					this.tableData = res.data
					this.loading = false
				})
			},
			/* 计算总数 */
			getTotal() {
				this.$Api.getTotal().then(res => {
					this.total = res.data
				})
			},
			/* 清空搜索框 */
			clear() {
				this.getlist(this.page.current)
			},
			/* 分页 */
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
				this.page.size = val
				this.getlist(this.page.current)
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
				this.page.current = val
				this.getlist(this.page.current)
			}
		}
	}
</script>


<style>
</style>
